<% cache_unless page_builder_enabled?, [spree_storefront_base_cache_key, section.cache_key_with_version, loaded.to_b] do %>
  <div style='<%= section_styles(section) %>' class='animate-fadeIn'>
    <div class='page-container'>
      <% heading_size = case section.preferred_heading_size
                        when 'small' then 'text-base font-medium'
                        when 'medium' then 'text-lg lg:text-xl font-medium'
                        when 'large' then 'text-xl lg:text-2xl font-medium'
                        end %>
      <% if section.taxon&.page_builder_image&.attached? && section.preferred_show_taxon_image %>
        <% desktop_slides_amount = 2.5 %>
        <% section_with_image = true %>
        <% arrows_on_top = false %>
      <% else %>
        <% desktop_slides_amount = 4 %>
        <% section_with_image = false %>
        <% arrows_on_top = true %>
      <% end %>
      <% if section.preferred_heading.present? %>
        <div class='mb-8 flex justify-between items-end'>
          <div class="md:basis-2/5">
            <h3
              class='<%= heading_size %> featured-taxon--title font-medium text-<%= section.preferred_heading_alignment %>'
              data-title="<%= section.preferred_heading.downcase %>"
              style='<%= section_heading_styles(section) %>'>
              <% if section.taxon.present? %>
                <%= link_to section.preferred_heading, spree_storefront_resource_url(section.taxon), data: { turbo_frame: "_top" } %>
              <% else %>
                <%= section.preferred_heading %>
              <% end %>
            </h3>

            <% if section.description_to_use.present? %>
              <div class='pt-4 text-<%= section.preferred_description_alignment %>'>
                <%= section.description_to_use %>
              </div>
            <% end %>
          </div>
          <% if section.taxon.present? %>
            <%= link_to spree_storefront_resource_url(section.taxon), class: class_names(section.preferred_button_style == "primary" ? "btn-primary" : "btn-secondary", " text-center hidden md:inline-block"), data: { turbo_frame: '_top' } do %>
              <%= section.preferred_button_text %>
            <% end %>
          <% end %>
        </div>
      <% end %>
      <% if loaded && section.taxon.present? %>
        <% taxon_products = taxon_products(section.taxon).limit(section.preferred_max_products_to_show) %>
        <% if taxon_products.any? %>
          <div class='grid grid-cols-1 lg:grid-cols-12 gap-4 lg:gap-6'>
            <% if section_with_image %>
              <div class='lg:col-span-5'>
                <%= link_to spree.nested_taxons_path(section.taxon), data: { turbo_frame: "_top" } do %>
                  <%= spree_image_tag(section.taxon.page_builder_image, height: 500, width: 500, class: 'h-full w-full object-cover object-center', loading: :lazy) %>
                <% end %>
              </div>
            <% end %>
            <div class='<%= section_with_image ? "lg:col-span-7" : "lg:col-span-12" %>'>
              <%= render 'spree/products/swiper', products: taxon_products, desktop_slides: desktop_slides_amount, pagination: 'bottom', arrows_on_top: arrows_on_top, section: section %>
            </div>
          </div>
        <% end %>
      <% else %>
        <div class='grid grid-cols-1 md:grid-cols-12 gap-4 md:gap-6'>
          <% if section_with_image %>
            <div class='md:col-span-5 w-full aspect-1 md:h-[536px] bg-accent'></div>
          <% end %>
          <div class='<%= section_with_image ? "md:col-span-7" : "md:col-span-12" %> flex justify-between flex-col overflow-hidden'>
            <% if section_with_image %>
              <div class='grid gap-4 md:gap-6 grid-cols-8 md:grid-cols-5'>
                <div class='col-span-6 md:col-span-2'>
                  <div class='aspect-1 bg-accent w-full'></div>
                  <div class='h-6 mt-2 w-32 bg-accent rounded-sm'></div>
                  <div class='h-8 mt-2 w-16 bg-accent rounded-sm'></div>
                </div>
                <div class='col-span-2 flex flex-col h-full overflow-hidden'>
                  <div class='h-full md:aspect-1 bg-accent w-full'></div>
                  <div class='h-6 mt-2 w-32 bg-accent rounded-sm shrink-0'></div>
                  <div class='h-8 mt-2 w-16 bg-accent rounded-sm shrink-0'></div>
                </div>
                <div class='hidden md:block'>
                  <div class='aspect-[1/2] bg-accent w-full'></div>
                  <div class='h-6 mt-2 w-32 bg-accent rounded-sm'></div>
                  <div class='h-8 mt-2 w-16 bg-accent rounded-sm'></div>
                </div>
              </div>
              <div class='md:flex <%= section.preferred_show_more_button ? "justify-between" : "justify-end" %> items-end'>
                <div class='bg-accent h-12 rounded-full w-full md:w-56 mt-8 md:order-1 hidden md:block'></div>
                <div class='<%= section.preferred_show_more_button ? "" : "hidden" %> bg-accent h-12 rounded-button w-full md:w-72 mt-6'></div>
              </div>
            <% else %>
              <div class='grid gap-4 md:gap-6 grid-cols-8 relative'>
                <div class='col-span-6 md:col-span-2'>
                  <div class='aspect-1 bg-accent w-full'></div>
                  <div class='h-6 mt-2 w-32 bg-accent rounded-sm'></div>
                  <div class='h-8 mt-2 w-16 bg-accent rounded-sm'></div>
                </div>
                <div class='col-span-2 md:col-span-2 flex flex-col'>
                  <div class='aspect-[1/3] md:aspect-1 bg-accent w-full flex-1'></div>
                  <div class='h-6 mt-2 w-32 bg-accent rounded-sm'></div>
                  <div class='h-8 mt-2 w-16 bg-accent rounded-sm'></div>
                </div>
                <div class='col-span-2 hidden md:block'>
                  <div class='aspect-1 bg-accent w-full'></div>
                  <div class='h-6 mt-2 w-32 bg-accent rounded-sm'></div>
                  <div class='h-8 mt-2 w-16 bg-accent rounded-sm'></div>
                </div>
                <div class='col-span-2 hidden md:block'>
                  <div class='aspect-1 bg-accent w-full'></div>
                  <div class='h-6 mt-2 w-32 bg-accent rounded-sm'></div>
                  <div class='h-8 mt-2 w-16 bg-accent rounded-sm'></div>
                </div>
              </div>
              <div class="md:hidden w-full block rounded-button bg-accent h-12 mt-8"></div>
            <% end %>
          </div>
        </div>
      <% end %>
    </div>
  </div>
<% end %>